<div class="content-section introduction">
    <div class="feature-intro">
        <h1>StyleClass</h1>
        <p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>ToggleClass</h5>
        <button pButton label="Toggle p-disabled" pStyleClass="@next" toggleClass="p-disabled"></button>
        <input type="text" pInputText class="block mt-3">

        <h5>Animations</h5>
        <button pButton label="Show" class="mr-2" pStyleClass=".box" enterClass="hidden" enterActiveClass="my-fadein"></button>
        <button pButton label="Hide" pStyleClass=".box" leaveActiveClass="my-fadeout" leaveToClass="hidden"></button>
        <div class="box hidden">Content</div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;StyleClassModule&#125; from 'primeng/styleclass';
</app-code>

            <h5>Getting Started</h5>
            <p>StyleClass has two modes, <i>toggleClass</i> to simply add-remove a class and enter/leave animations.</p>

            <p><b>ToggleClass</b></p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;button pButton label="Toggle" pStyleClass="@next" toggleClass="p-disabled"&gt;&lt;/button&gt;
&lt;input type="text" pInputText class="block mt-3"&gt;
</app-code>

            <p><b>Enter/Leave Animation</b></p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;button pButton label="Show" class="mr-2" pStyleClass=".box" enterClass="hidden" enterActiveClass="my-fadein"&gt;&lt;/button&gt;
&lt;button pButton label="Hide" pStyleClass=".box" leaveActiveClass="my-fadeout" leaveToClass="hidden"&gt;&lt;/button&gt;
&lt;div class="box hidden"&gt;Content&lt;/div&gt;
</app-code>

            <h5>Target</h5>
            <p>Target element is defined with the <i>pStyleClass</i> attribute that can either be a valid css query or one of the keywords below.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>@next</td>
                            <td>Next element.</td>
                        </tr>
                        <tr>
                            <td>@prev</td>
                            <td>Previous element.</td>
                        </tr>
                        <tr>
                            <td>@parent</td>
                            <td>Parent element.</td>
                        </tr>
                        <tr>
                            <td>@grandparent</td>
                            <td>Parent element of the parent.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>pStyleClass</td>
                            <td>string</td>
                            <td>selector</td>
                            <td>Selector to define the target element.</td>
                        </tr>
                        <tr>
                            <td>enterClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Class to add when item begins to get displayed.</td>
                        </tr>
                        <tr>
                            <td>enterActiveClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Class to add during enter animation.</td>
                        </tr>
                        <tr>
                            <td>enterToClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Class to add when enter animation is completed.</td>
                        </tr>
                        <tr>
                            <td>leaveClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Class to add when item begins to get hidden.</td>
                        </tr>
                        <tr>
                            <td>leaveActiveClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Class to add during leave animation</td>
                        </tr>
                        <tr>
                            <td>leaveToClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Class to add when leave animation is completed.</td>
                        </tr>
                        <tr>
                            <td>hideOnOutsideClick</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Whether to trigger leave animation when outside of the element is clicked.</td>
                        </tr>
                        <tr>
                            <td>toggleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Adds or removes a class when no enter-leave animation is required.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <p>Directive has no events.</p>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/styleclass" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;ToggleClass&lt;/h5&gt;
&lt;button pButton label="Toggle" pStyleClass="@next" toggleClass="p-disabled"&gt;&lt;/button&gt;
&lt;input type="text" pInputText class="block mt-3"&gt;

&lt;h5&gt;Animations&lt;/h5&gt;
&lt;button pButton label="Show" class="mr-2" pStyleClass=".box" enterClass="hidden" enterActiveClass="my-fadein"&gt;&lt;/button&gt;
&lt;button pButton label="Hide" pStyleClass=".box" leaveActiveClass="my-fadeout" leaveToClass="hidden"&gt;&lt;/button&gt;
&lt;div class="box hidden"&gt;Content&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component&#125; from '@angular/core';

@Component(&#123;
    templateUrl: './styleclassdemo.html',
    styles:[`
        .box &#123;
            background-color: var(--green-500);
            color: #ffffff;
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-radius: 4px;
            margin-top: 1rem;
            font-weight: bold;
            box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
        &#125;

        @keyframes my-fadein &#123;
            0%   &#123; opacity: 0; &#125;
            100% &#123; opacity: 1; &#125;
        &#125;

        @keyframes my-fadeout &#123;
            0%   &#123; opacity: 1; &#125;
            100% &#123; opacity: 0; &#125;
        &#125;

        .my-fadein &#123;
            animation: my-fadein 150ms linear;
        &#125;

        .my-fadeout &#123;
            animation: my-fadeout 150ms linear;
        &#125;
    `],
&#125;)
export class StyleClassDemo &#123;

&#125;
</app-code>

        </p-tabPanel>
    </p-tabView>
</div>
